body{
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-content: center;
    main{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 20px;
        .style{
            width: 320px;
            height: 320px;
            border: solid 5px red;;
            position: relative;
            overflow: hidden;

            .info{
                width: 100%;
                height: 100%;
                display: grid;
                justify-content: center;
                align-items: center;
                background:gray ;
                position: absolute;
                transition-duration: 1s;
                // opacity: 0.2; 
            }
            .pic{
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: absolute;
                transition-duration: 1s;
                img{
                    width: 320px;
                }
            }
        }
        .a1{
            &:hover > .pic{
                transform: translateY(320px);
            }
        }
        .a2{
            .info{
                transform: translateY(-320px);
            }
            &:hover >.info{
                transform: translateY(0px);
                
            }
            &:hover >.pic{
                transform: translateY(320px);
               
            }
        }
        .a3{
            .info{
                transform: rotateX(180deg);
            }
            &:hover > .info{
                transform: rotateX(0deg);
            }
            &:hover > .pic{
                transform: rotateX(90deg);
                
            }
        }
        .a4{
            .info{
                transform: rotateX(90deg);
                z-index: 1;
            }
            &:hover > .info{
                transform: rotateX(0deg);
            }
            &:hover > .pic{
                transform: rotateX(90deg);
                
            }
        }
        .a5{
            .info{
                transform: translate(-100%,-100%);
               
            }
            &:hover > .info{
                transform: translate(0%,0%);
                
            }
            &:hover > .pic{
                transform: translate(100%,100%);
                
            }
        }
    }
}